<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画</title>
    <style>
        .box1{
            width: 50px;
            height: 50px;
            background-color: blue;
            border-radius: 50%;
            animation: myAnimation 3s linear 2s infinite;
            animation-direction: alternate;
        }
        @keyframes myAnimation {
            0%{
                margin-left: 0px;
            }
            50%{
                margin-left: 500px;
            }
            75%{
                margin-top: 500px;
            }
            100%{
                margin-left: 0px;
            }
        }
        .box1:hover{
            animation-play-state: paused;
            background-color: blueviolet;
        }
    </style>
</head>

<body>
    <!-- 
    动画是是元素从一种样式组件变化为另外一种样式的效果
    您可以改变任意多的样式任意多的次数
    请用百分比来规定变化发生的时间，或用关键字"from"和"to"，等同于0%和100%
    0%是动画的开始，100%是动画的完成

    @keyframes创建动画
    
    animation执行动画
    -name 设置动画名称
    -duration 动画持续时间
    -timing-function 动画的速度
        -ease 逐渐变慢（默认）
        -linear 匀速
        -ease-in 加速
        -ease-out 减速
        -ease-in-out 先加速后减速
    -delay 动画开始前的延时执行
    -iteration-count 动画执行的次数，或者infinite无限次数循环
    -direction 动画播放的方向
        -normal 默认值为normal表示向前播放
        -alternate 动画播放在第偶数次向前播放，第奇次数向反方向播放
    -animation-play-stste 控制动画的播放状态：running代表播放，而paused代表停止播放
    -->

    <div class="box1"></div>
</body>

</html>